<template>
  <div class="nav">
    <el-col :span="12">
      <!-- 头像 -->
      <el-avatar
        :size="60"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      ></el-avatar>

      <el-menu
        style="border-right: 0px"
        background-color="#354153"
        text-color="#fff"
        router
        active-text-color="#ffd04b"
      >
        <el-menu-item
          :index="item.url"
          v-for="item in items"
          :key="item.id"
          v-if="!item.child"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
        <!-- 有子级项 -->
        <el-submenu v-else :index="item.id">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </template>

          <el-menu-item
            :index="childs.url"
            v-for="childs in item.child"
            :key="childs.id"
            >{{ childs.name }}</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 导航栏数据
      items: [
        {
          id: 1,
          name: "首页",
          url: "/Index",
          icon: "el-icon-menu",
        },
        {
          id: 2,
          name: "用户管理",
          url: "/user",
          icon: "el-icon-user-solid",
          child: [
            {
              id: 10,
              name: "用户列表",
              url: "/user/userList",
              icon: "el-icon-s-data",
            },
            {
              id: 20,
              name: "用户添加",
              url: "/user/userAdd",
              icon: "el-icon-circle-plus",
            },
          ],
        },
        {
          id: 3,
          name: "分类管理",
          url: "/classfiy",
          icon: "el-icon-s-order",
        },
        {
          id: 4,
          name: "博客管理",
          // url: "/blog",
          icon: "el-icon-reading",
          child: [
            {
              id: 30,
              name: "博客列表",
              url: "/blog/blogList",
              icon: "el-icon-s-data",
            },
            {
              id: 40,
              name: "博客添加",
              url: "/blog/blogAdd",
              icon: "el-icon-edit-outline",
            },
          ],
        },
        {
          id: 5,
          name: "错误页面",
          // url: "/error",
          icon: "el-icon-error",
          child: [
            {
              id: 50,
              name: "401",
              // url: "/error/401",
              icon: "el-icon-error",
            },
            {
              id: 60,
              name: "404",
              // url: "/error/404",
              icon: "el-icon-error",
            },
          ],
        },
        {
          id: 6,
          name: "账户安全",
          url: "/permissions",
          icon: "el-icon-lock",
        },
        {
          id: 7,
          name: "账户安全",
          url: "/security",
          icon: "el-icon-s-tools",
        },
      ],
    };
  },
};
</script>

<style  lang="less" scoped>
/* 导航栏 */
.nav {
  width: auto;
  height: 100%;
  /* 导航栏布局 */
  background-color: rgb(53, 65, 83);
  .el-col {
    width: 100%;
    height: 100%;
    /* 导航栏列表 */
    .el-menu {
      background-color: transparent;
      border: none;
      color: white;
    }
    // 头像样式
    .el-avatar {
      margin: 20px 0px 0px 20px;
    }
  }
}
</style>